* { /*通配符选择器 */
    margin: 0;
    padding: 0;
    list-style: none;
}

#nav { /*id选择器 */
    height: 30px;
    width: 600px;
    margin: 0px auto; /*块的居中*/
    overflow: hidden;
    border-radius: 5px;
}

#nav li { /*后代选择器*/
    float: left;
    height: 60px;
    width: 100px;
    text-align: center; /*水平居中*/
    line-height: 30px; /*垂直居中*/
    color: #fff; /*前景色*/
}

.li-before {
    background: red; /*背景颜色*/
}

.liafter {
    background: #ffae54;
    color: #000;
}

#nav li {
    transition: all 1s;
}

#nav li:hover {
    transform: translate(0, -50%);
}